<template>
    <view class="register-container">
      <!-- Logo区域 -->
      <view class="logo-area">
        <image class="logo" src="/static/logo.png" mode="aspectFit" />
        <text class="title">注册账号</text>
      </view>
  
      <!-- 注册表单 -->
      <view class="register-form">
        <view class="input-item">
          <image class="icon" src="/static/icons/phone.svg" />
          <input 
            v-model="form.phone"
            type="number"
            placeholder="请输入手机号"
            maxlength="11"
            autocomplete="off"
          />
        </view>
  
        <view class="input-item code-input">
          <image class="icon" src="/static/icons/lock.png" />
          <input 
            v-model="form.code"
            type="number"
            placeholder="请输入验证码"
            maxlength="6"
            autocomplete="off"
          />
          <text 
            class="send-code-btn" 
            :class="{ disabled: counting > 0 }"
            @click="handleSendCode"
          >
            {{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}
          </text>
        </view>
  
        <view class="input-item">
          <image class="icon" src="/static/icons/lock.png" />
          <input 
            v-model="form.password"
            type="password"
            placeholder="请设置密码"
            autocomplete="new-password"
          />
        </view>
  
        <view class="input-item">
          <image class="icon" src="/static/icons/lock.png" />
          <input 
            v-model="form.confirmPassword"
            type="password"
            placeholder="请确认密码"
            autocomplete="new-password"
          />
        </view>
  
        <button class="submit-btn" @click="handleRegister">注册</button>
  
        <view class="login-link">
          已有账号？<text @click="goLogin">立即登录</text>
        </view>
  
        <view class="agreement">
          <text class="agreement-text">注册即表示同意</text>
          <text class="link">《用户协议》</text>
          <text class="agreement-text">和</text>
          <text class="link">《隐私政策》</text>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { sendRegisterCode, register } from './index.api'
  
  const counting = ref(0)
  const timer = ref(null)
  
  const form = ref({
    phone: '',
    code: '',
    password: '',
    confirmPassword: ''
  })
  
  // 处理发送验证码
  const handleSendCode = async () => {
    if (counting.value > 0) return
    if (!form.value.phone) {
      uni.showToast({
        title: '请输入手机号',
        icon: 'none'
      })
      return
    }
    
    try {
      await sendRegisterCode(form.value.phone)
      startCountDown()
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
    } catch (error) {
      uni.showToast({
        title: '发送失败，请重试',
        icon: 'none'
      })
    }
  }
  
  // 开始倒计时
  const startCountDown = () => {
    counting.value = 60
    timer.value = setInterval(() => {
      if (counting.value > 0) {
        counting.value--
      } else {
        clearInterval(timer.value)
      }
    }, 1000)
  }
  
  // 处理注册
  const handleRegister = async () => {
    const { phone, code, password, confirmPassword } = form.value
    
    if (!phone || !code || !password || !confirmPassword) {
      uni.showToast({
        title: '请填写完整信息',
        icon: 'none'
      })
      return
    }
  
    if (password !== confirmPassword) {
      uni.showToast({
        title: '两次密码输入不一致',
        icon: 'none'
      })
      return
    }
  
    try {
      const res = await register({
        phone,
        code,
        password
      })
      
      if(res.data.code === 200) {
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })
        
        // 注册成功后延迟跳转到首页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/home/index'  // 跳转到首页
          })
        }, 1500)
      } else {
        uni.showToast({
          title: res.data.msg || '注册失败',
          icon: 'none'
        })
      }
      
    } catch(error) {
      uni.showToast({
        title: '注册失败',
        icon: 'none'
      })
    }
  }
  
  // 跳转登录
  const goLogin = () => {
    uni.navigateBack()
  }
  </script>
  
  <style lang="scss" scoped>
  .register-container {
    padding: 0 40rpx;
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .logo-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100rpx;
      margin-bottom: 60rpx;
  
      .logo {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 20rpx;
      }
  
      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
    }
  
    .register-form {
      width: 100%;
  
      .input-item {
        display: flex;
        align-items: center;
        padding: 24rpx 30rpx;
        margin-bottom: 20rpx;
        background-color: #f8f8f8;
        border: 1px solid #eeeeee;
        border-radius: 45rpx;
        
        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
  
        input {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          background: transparent;
          height: 44rpx;
          
          &::placeholder {
            color: #999;
          }
        }
      }
  
      .code-input {
        position: relative;
        
        .send-code-btn {
          position: absolute;
          right: 30rpx;
          color: #333;
          font-size: 26rpx;
          padding: 4rpx 0;
          
          &.disabled {
            color: #999;
          }
        }
      }
  
      .submit-btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background-color: #000;
        color: #fff;
        border-radius: 45rpx;
        font-size: 32rpx;
        margin: 40rpx 0;
      }
  
      .login-link {
        text-align: center;
        font-size: 26rpx;
        color: #999;
        margin-bottom: 40rpx;
  
        text {
          color: #333;
          font-weight: 500;
        }
      }
  
      .agreement {
        text-align: center;
        font-size: 24rpx;
  
        .agreement-text {
          color: #999;
        }
  
        .link {
          color: #333;
          margin: 0 4rpx;
        }
      }
    }
  }
  </style>